<template>
  <div class="personal-setting">
    <div class="directory">
      <div
        class="item"
        v-for="item in directoryData"
        :key="item.index"
        :class="{ active: selectIndex === item.index }"
        @click="selectIndex = item.index"
      >
        <svg-icon :icon-file-name="item.icon"></svg-icon>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="content">
      <!-- 个人资料 -->
      <personal-data v-if="selectIndex === '1'"></personal-data>
      <!-- 账号设置 -->
      <account-view v-if="selectIndex === '2'"></account-view>
    </div>
  </div>
</template>

<script>
import PersonalData from "./components/PersonalData.vue";
import AccountView from "./components/AccountView.vue";
export default {
  components: {
    PersonalData,
    AccountView,
  },
  data() {
    return {
      // 选中的目录
      selectIndex: "1",
      directoryData: [
        { index: "1", icon: "idcard", name: "个人资料" },
        { index: "2", icon: "user", name: "账号设置" },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.personal-setting {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  .directory {
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    margin-left: 15%;
    width: 11%;
    min-height: 300px;
    background-color: #fff;
    .item {
      cursor: pointer;
      border-radius: 4px;
      padding: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
      color: #515767;
      font-weight: 400;
      svg {
        width: 23px;
        height: 23px;
      }
      &:hover,
      &.active {
        background-color: #eaf2ff;
        color: #1e80ff;
      }
    }
  }
  .content {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    width: 50%;
    min-height: 600px;
    background-color: #fff;
  }
}
</style>
